<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Agent details</title>
	<link rel="stylesheet" href="../css/xingchao.css">
    <link rel="stylesheet" href="../css/jquery.page.css">
	<link rel="stylesheet" href="../css/bootstrap-new.css">
	<link rel="stylesheet" href="../css/webvowl.css">
	<link rel="stylesheet" href="../css/webvowl.app.css">
	<link rel="stylesheet" href="../css/zy.css">
	<link rel="stylesheet" href="../css/evaluateStar.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
    <script type="text/javascript" src="../js/jquery.page.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/d3.min.js"></script>
	<script type="text/javascript" src="../js/webvowl.js"></script>
	<script type="text/javascript" src="../js/webvowl.app.js"></script>
	<script type="text/javascript" src="../js/wangEditor.min.js"></script>
	<script type="text/javascript" src="../js/evaluateStar.js"></script>
</head>
<body style="background: #EFEFEF;">

<!--  
	头部
-->
<div class="head">
	<div class="w" style="height:50px;">
		<a href="index.html">
			<img src="../images/logo.png" alt="" width="150px;">
		</a>
		<ul class="nav r">
	       <li class="cur">
	            <a href="index.html">USources</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li>
	            <a href="ziyuan.html">Search</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li>
	            <a href="jiaocheng.html">Tutorial</a>
	            <sub class="sub1"></sub>
	        </li>
	        <!--
             <li>
                 <a href="biaozhun.html" data-localize='top.API'>领域图谱</a>
                 <sub class="sub1"></sub>
             </li>
             -->
	        <li>
	            <a href="page.html">AboutUs</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li id='userbox'>
	            <a href="user.html" id="user-box">User Center</a>|<a href="user.html?action=out">Logout</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li id="langBox">
                 <a href="../detail.html" data-lang='zh-CN'>中</a>&nbsp;|
                 <a href="#" data-lang="en-US">EN</a>
                 <sub class="sub1"></sub>
             </li>
		</ul>
	</div>
</div>

<div class="main w">

	<div class="row">
		<div id="agentInfo" class="soso_list">
		</div>
	</div>
	
<br>
	<span>You can evaluate the dataset:</span>&nbsp;&nbsp;
	<div id="xzw_starSys">
		<div id="xzw_starBox">
			<ul class="star" id="star" style="margin-bottom: 0px">
				<li><a href="javascript:void(0)" class="one-star">1</a></li>
				<li><a href="javascript:void(0)" class="two-stars">2</a></li>
				<li><a href="javascript:void(0)" class="three-stars">3</a></li>
				<li><a href="javascript:void(0)" class="four-stars">4</a></li>
				<li><a href="javascript:void(0)" class="five-stars">5</a></li>
			</ul>
			<div class="current-rating" id="showb"></div>
		</div>
		<div class="description"></div>
		<div style="clear:both"></div>
	</div>
	<div class="row">
	<ul class="nav nav-tabs" style="margin-top: 18px">
		<li class="active"><a data-toggle="tab" href="#home">ConceptGraph</a></li>
		<li><a data-toggle="tab" href="#menu2">Download&Invoking</a></li>
		<!-- <li ><a data-toggle="tab" href="#menu3">数据集评价</a></li> -->
		<li ><a data-toggle="tab" href="#menu1">OtherConcept</a></li>
	  </ul>
	</div>
	  <div class="tab-content">


		<div id="menu1" class="tab-pane fade">

			<div id="otherClassList" style="margin-top: 20px;margin-bottom: 10px">
		      	<h4 style="font-size:16px">[Other Datasets under this Agent]</h4>
		      	<div id="descriTable">
					<table class="table table-hover">
					  <thead>
					  	<tr>
					  		<th>No.</th>
					  		<th>Class</th>
					  		<th>concept</th>
					  		<th>Instance num</th>
					  		<th>Triple num</th>
					  		<th>Manipulation</th>
					  	</tr>
					  </thead>
					  <tbody id="otherTbBody"></tbody>
					</table>
				</div>
			</div>
	    </div>

	    <div id="home" class="tab-pane fade in active">
	    
			
	    <div class="row" style="height: 600px;margin-top: 0px">
		<div class="col-md-9 column">
			<div class="panel panel-default" style="margin-left:-15px">
				<div class="panel-heading">
					Current Concept [<a href="javascript:void(0)" onclick="goto();">More Option</a>][<a href="javascript:void(0)" onclick="owl();">OWL</a>]
					<div style="float: right;">
						<ul id="optionsMenu">
							<li id="pauseOption"><a id="pause-button" href="#">Pause</a></li>
							<li id="resetOption"><a id="reset-button" href="#"
								type="reset">Reset</a></li>
							<li id="filterOption"><a href="#">Filter</a>
								<ul class="toolTipMenu filter">
									<li class="slideOption" id="nodeDegreeFilteringOption"></li>
								</ul>
							</li>
							<li id="gravityOption"><a href="#">Gravity</a>
								<ul class="toolTipMenu gravity">
									<li class="slideOption" id="classSliderOption"></li>
									<li class="slideOption" id="datatypeSliderOption"></li>
								</ul>
							</li>
							<li id="export"><a href="#">Export</a>
								<ul class="toolTipMenu export">
									<li><a href="#" download id="exportSvg">Export as SVG</a></li>
									<li><a href="#" download id="exportJson">Export as JSON</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<div class="panel-body" style="font-size: 16px; padding: 5px;">
					<section id="canvasArea">
						<div id="loading-info">
							<div id="loading-error" class="hidden">
								<div id="error-info"></div>
								<div id="error-description-button" class="hidden">Show error details</div>
								<div id="error-description-container" class="hidden">
									<pre id="error-description"></pre>
								</div>
							</div>
							<div id="loading-progress" class="hidden">
								<span>Loading ontology... </span>
								<div class="spin">&#8635;</div>
							</div>
						</div>
						<div id="graph" style="max-height: 600px;"></div>
					</section>
				</div>
			</div>
		</div>
		<div class="col-md-3 column" style="margin-left: -15px; max-height: 662px; background-color: #000000">
			<aside id="detailsArea">
				<section id="generalDetails" style="height: 655px;">
					<h1 id="title"></h1>
						<h5>
							<span><strong>Graph: </strong><span id="about"></span></span> <span><strong>Version:
							</strong><span id="version"></span></span>
						</h5>
						<h5>
							<label>Language: <select id="language" name="language"
								size="1"></select></label>
						</h5>
						<h3 class="accordion-trigger" id="selection-details-trigger"
							style="font-size: 15px;">Selection Details</h3>
						<div class="accordion-container" id="selection-details">
							<div id="classSelectionInformation" class="hidden">
								<p class="propDetails">
									Name: <span id="name"></span>
								</p>
								<p class="propDetails" style="word-wrap: break-word;">
									URI: <a id="uri"></a>
								</p>
								<p class="propDetails">
									Type: <span id="typeNode"></span>
								</p>
								<p class="propDetails">
									Equiv.: <span id="classEquivUri"></span>
								</p>
								<p class="propDetails">
									Disjoint: <span id="disjointNodes"></span>
								</p>
								<p class="propDetails">
									Charac.: <span id="classAttributes"></span>
								</p>
								<p class="propDetails">
									Individuals: <span id="individuals"></span>
								</p>
								<p class="propDetails">
									Description: <span id="nodeDescription"></span>
								</p>
								<p class="propDetails">
									Comment: <span id="nodeComment"></span>
								</p>
							</div>
							<div id="propertySelectionInformation" class="hidden">
								<p class="propDetails">
									Name: <span id="propname"></span>
								</p>
								<p class="propDetails" style="word-wrap: break-word;">
									URI: <a id="propuri"></a>
								</p>
								<p class="propDetails">
									Type: <span id="typeProp"></span>
								</p>
								<p id="inverse" class="propDetails">
									Inverse: <span></span>
								</p>
								<p class="propDetails">
									Domain: <span id="domain"></span>
								</p>
								<p class="propDetails">
									Range: <span id="range"></span>
								</p>
								<p class="propDetails">
									Subprop.: <span id="subproperties"></span>
								</p>
								<p class="propDetails">
									Superprop.: <span id="superproperties"></span>
								</p>
								<p class="propDetails">
									Equiv.: <span id="propEquivUri"></span>
								</p>
								<p id="infoCardinality" class="propDetails">
									Cardinality: <span></span>
								</p>
								<p id="minCardinality" class="propDetails">
									Min. cardinality: <span></span>
								</p>
								<p id="maxCardinality" class="propDetails">
									Max. cardinality: <span></span>
								</p>
								<p class="propDetails">
									Charac.: <span id="propAttributes"></span>
								</p>
								<p class="propDetails">
									Description: <span id="propDescription"></span>
								</p>
								<p class="propDetails">
									Comment: <span id="propComment"></span>
								</p>
							</div>
							<div id="noSelectionInformation">
								<p>
									<span>Select an element in the visualization.</span>
								</p>
							</div>
						</div>
					</section>
				</aside>
			</div>
			<!-- end of right property desc -->
		</div>
	    </div>

	    <div id="menu2" class="tab-pane fade">
	    <div id="thisClassList" style="display: none; margin-left:2px; margin-top: 0px;margin-bottom: 10px">
	      	<h4 style="font-size:16px">[<b>Download the Dataset</b>]</h4>
	      	<div id="descriTable">
				<table class="table table-hover">
				  <thead>
				  	<tr>
				  		<th>No.</th>
					  	<th>Class</th>
					  	<th>concept</th>
					  	<th>Instance num</th>
					  	<th>Triple num</th>
					  	<th>Manipulation</th>
				  	</tr>
				  </thead>
				  <tbody id="thisTbBody"></tbody>
				</table>
			</div>
		</div>
		<br>
		
	    <br>
	      <h4 style="font-size:16px">[<b>API Invoking Method</b>]</h4><p></p>
	
	      	<div class="panel panel-info">
			      <div class="panel-heading">
			        <h3 class="panel-title">API desc</h3>
			      </div>
			      <div class="panel-body">
			                        <div class="simpleline"><strong>API address：</strong><span class="url" id="apiAddress"></span></div>
			                        <div class="simpleline"><strong>Return Format：</strong><span class="url">JSON</span></div>
			                        <div class="simpleline"><strong>Request method：</strong><span class="url">http get/post</span></div>
			                        <div class="simpleline"><strong>Example：</strong><span class="url" id="apiAddressExample"></span></div>
			      </div>
			</div>
			
			<div class="panel panel-info">
		      <div class="panel-heading">Parameters</div>
		      <table class="table table-bordered">
		            <!-- Table -->
		            <thead>
		              <tr>
		                <th>Parameters</th>
		                <th>p</th>
		                <th>q</th>
		                <th>order</th>
		              </tr>
		            </thead>
		            <tbody>
		              <tr>
		                <th>Description</th>
		                <td>"p" means page,refering to certain page</td>
		                <td>"q" indicates search keywords</td>
		                <td>"order" is to rank for a certan property</td>
		              </tr>
		              <tr>
		                <th scope="row">Exmaple</th>
		                <td>p=2</td>
		                <td>q=volksvagon</td>
		                <td>order=id</td>
		              </tr>
		            </tbody>
		      </table>
			</div>
			
			<div class="panel panel-info" id="classPropertiesDiv" style="display: none">
			      <div class="panel-heading">
			        <h3 class="panel-title"><b>Property List(could be the value of "order")</b></h3>
			      </div>
			      <table class="table table-bordered">
		            <!-- Table -->
		            <thead>
		              <tr>
		                <th>No.</th>
		                <th>PropertyName</th>
		                <th>Description</th>
		                <th>Note</th>
		              </tr>
		            </thead>
		            <tbody id="classPropertiesBody">
		            </tbody>
		      </table>
			</div>


	    </div>

	    <div id="menu3" class="tab-pane fade">
			<div id="editor">
				<p>Please<a>Login</a>and comment</p>
			</div>
	    </div>
	  </div>
	</div>


	
	<div class="clear"></div>
</div>
<!--  
	底部
-->
<div class="copyright">
Copyright © 2016-2017 Semantic (Shanghai) Information Technology Co., Ltd. All rights reserved.
</div>

</body>
</html>
<script type="text/javascript" src="../js/App.min.js"></script>
<script type="text/javascript">
window.onload = webvowl.app().initialize;
$(function(){
	var E = window.wangEditor;
	var editor = new E('#editor');
	// 或者 var editor = new E( document.getElementById('#editor') )
	editor.create();
	editor.$textElem.attr('contenteditable', false);
})

function goto() {
	var iri = location.hash.split("iri=")[1];
	window.open("/visweb/#iri=" + iri);
}

function owl() {
	var iri = location.hash.split("iri=")[1];
	window.open(iri);
}
</script>
